<template>
  <div class="demo_sty">
    <el-scrollbar style="height: 100%" >
      <div class="return">
        <span><i class="el-icon-back"></i>   返回</span>
      </div>
      <div class="separator_sty"></div>
      <div class="form_sty">
        <el-form :model="form2" ref="form2" label-width="80px"  :rules="form2Rules" style="margin-left: 36px;">
          <el-row>
            <el-col :span="8">
              <el-form-item  label="主题" prop="contractTheme" >
                <el-input v-model="form2.contractTheme" placeholder="优品创意公司第一次合作"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="对应客户" prop="customerByCustomId.cusName">
                <el-input  v-model="form2.customerByCustomId.cusName" placeholder="优品创意公司" v-on:click.native="add"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="对应机会" prop="businessInfoByBusinesId">
                <el-select v-model="form2.businessInfoByBusinesId" value-key="businesId">
                  <el-option v-for="op in opportunityList" :key="op.businesId" :label="op.businessName" :value="op">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item label="合同编号">
                <el-input v-model="form2.contractName" placeholder="2002201533" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生效时间" prop="effectTime">
                <el-date-picker type="date" placeholder="选择日期" v-model="form2.effectTime":pickerOptions="pickerOptions"  style="width: 217px;"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="失效时间" prop="failureTime">
                <el-date-picker type="date" placeholder="选择日期"  v-model="form2.failureTime":pickerOptions="pickerOptions"  style="width: 217px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="签约人" prop="customerName">
                <el-select v-model="form2.customerName" style="width:217px" value-key="cupId">
                  <el-option v-for="cu in culinkManList" :key="cu.cupId" :label="cu.cupName" :value="cu">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所有者">
                <el-input v-model="form2.empId8.empName" placeholder="陈默" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签约时间" prop="signingTime">
                <el-date-picker v-model="form2.signingTime":pickerOptions="pickerOptions" type="date" placeholder="选择日期"  style="width: 217px;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="总金额" prop="total">
                <el-input v-model="form2.totalAmount"   placeholder="12000,000" ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="审批人:" prop="contractApproverid">
                <el-select  v-model="form2.contractApproverid" style="width: 215px;">
                  <el-option-group
                    v-for="group in approvalList"
                    :key="group.postName"
                    :label="group.postName">
                    <el-option
                      v-for="item in group.empVos"
                      :key="item.employeesId"
                      :label="item.empName"
                      :value="item.employeesId">
                    </el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="付款方式" prop="termsPayment">
                <el-select v-model="form2.termsPayment" value-key="termsId">
                  <el-option v-for="met in paymentsList" :key="met.termsId" :label="met.termsName" :value="met">

                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="状态:" prop="contractState">
                执行中
              </el-form-item>

            </el-col>

            <el-col :span="8">
              <el-form-item label="报价单编号" prop="quotationid">
                <el-input v-model="offerNuber"  placeholder="12000,000" v-on:click.native="show" @click="offerEvent()"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注 " prop="desc">
                <el-input type="textarea" v-model="form2.noteInfo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label=" ">
            <el-button  style="margin: 0 0 0 445px;" type="primary" @click="onSubmit2('form2')">保存</el-button>
          </el-form-item>
        </el-form>

        <div>
          <!--客户列表 isCus-->
          <el-dialog title="选择客户" :visible.sync="customerVisable">
            <el-row>
              <el-col>
                <el-input  placeholder="请输入客户名称" v-model="customerInfo" @change="searchCustomer"  suffix-icon="el-icon-search" style="width:200px;">
                </el-input>
              </el-col>
              <el-col>
                <el-table  :data="customerList" height="250" style="width: 100%">
                  <el-table-column width="55">
                    <template slot-scope="scope">
                      <el-radio v-model="radio" :label="scope.row.customId" @change="getCustomerRow(scope.row)">
                        {{''}}
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cusName" label="客户名称" >
                  </el-table-column>
                  <el-table-column prop="cusSource" label="来源">
                  </el-table-column>
                  <el-table-column prop="customTime" label="创建时间">
                    <template slot-scope="scope">
                      {{scope.row.customTime| formatDate }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col>
                <el-pagination  @size-change="handleSizeChange1"  @current-change="changePage1" :current-page.sync="currentPage1"
                                :page-sizes="pageSizes1" layout="total, sizes, prev, pager, next, jumper"
                                :total="totalSize1" style="float: right;margin-top: 10px;">
                </el-pagination>
              </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="customerOK">确 定</el-button>
        <el-button @click="customerVisable = false">取 消</el-button>
      </span>
          </el-dialog>




          <el-dialog title="选择报价单" :visible.sync="addformVisable">
            <el-row>
              <el-col>
                <el-input  placeholder="请输入客户名称" v-model="input10"   suffix-icon="el-icon-search" style="width:200px;">
                </el-input>
              </el-col>
              <el-col>
                <el-table  :data="offerInfo" height="250" style="width: 100%">
                  <el-table-column width="55">
                    <template slot-scope="scope">
                      <el-radio v-model="offerRadio" :label="scope.row.offerId2">
                        {{''}}
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column prop="offerNumber" label="报价单编号" >
                  </el-table-column>
                  <el-table-column prop="offerTitle" label="报价单主题">
                  </el-table-column>
                  <el-table-column prop="productOffer" label="报价金额">
                  </el-table-column>
                  <el-table-column prop="offerTime" label="日期" width="200px">
                    <template slot-scope="scope">
                      {{scope.row.offerTime|formatDate}}
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
              <el-col>
                <el-pagination  @size-change=""  @current-change="" :current-page.sync="currentPage2"
                                :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper"
                                :total="totalSize2" style="float: right;margin-top: 10px;">
                </el-pagination>
              </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="offerOK">确 定</el-button>
        <el-button @click="addformVisable = false">取 消</el-button>
      </span>
          </el-dialog>
        </div>
      </div>
    </el-scrollbar>

  </div>
</template>

<script>
  import {formatTimeToStr} from '../assets/format'
  import TemplateVue from './homepage/TemplateVue'

  export default {
    name: 'SaDemoPage_2',
    components: {TemplateVue},
    data(){
      var checkedFailureTime = (rule, value, callback) => {
        if(this.form2.effectTime>= value){
          callback(new Error('失效时间不规范！！'));
        }else{
          callback();
        }
      };

      var checkedSigningTime = (rule, value, callback) => {
        if(this.form2.effectTime<=value){
          callback(new Error('签约时间不规范！！'));
        }else{
          callback();
        }
      };


      return{
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        },
        approvalList:[],//审批人
        offerNuber:'',
        offerInfo:[],//报价单信息
        info:'',
        culinkManList:[],//对应联系人
        paymentsList:[],//付款列表
        pageSizes1:[4, 8, 12],//可选择的页大小
        currentPage1:1,//当前页
        pageSize1:0,//页大小
        totalSize1:0,//总页数
        currentPage2:1,//报价单当前页
        pageSize2:0,//报价单页大小
        totalSize2:0,//报价单总页数
        input10:'',
        customerInfo:'',//客户搜索
        addformVisable:false,//报价单弹框显示
        customerVisable:false,//客户选择
        customerList:[],//客户信息
        radio:'',//选中客户id
        offerRadio:'',//报价单id
        cusList:[],//选中客户信息
        opportunityList:[],//对应机会列表
        form2: {
          //表单对象
          contractApproverid:'',
          contractId:0,//合同id
          contractTheme: '',//主题
          contractName:'',
          customerByCustomId: {
            customId:'',
            cusName:''
          },//对应客户
          businessInfoByBusinesId: '',//对应机会
          effectTime: '',//合同生效时间
          failureTime: '',//合同失效时间
          customerName:'',//签约人
          empId8:{
            employeesId:'',
            empName:''
          },//所有者
          signingTime:'',//签约时间,
          totalAmount:'',//总金额，
          receivableAmount:'',//回款金额
          termsPayment:'',//付款方式
          contractState: '',//状态
          noteInfo: '',//备注
          offerByOfferId2:{
            offerId2:'',
            offerNumber:'',
          }//报价单id
        },
        form2Rules:{//表单验证
          contractTheme:[
            { required: true, message: '请输入合同主题', trigger: 'blur' },
          ],
          'customerByCustomId.cusName':[
            { required: true, message: '请选择客户', trigger: 'change' },
          ],
          businessInfoByBusinesId:[
            { required: true, message: '请选择对应机会', trigger: 'change' },
          ],
          effectTime:[
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          failureTime:[
            {type:'date',required:true,message:'请选择日期',trigger:'change'},
           /* { validator:checkedFailureTime,trigger: 'change' }*/
          ],
          signingTime:[
            {type:'date',required:true,message:'请选择日期',trigger:'change'},
            { validator:checkedSigningTime,trigger: 'change' }
          ],
          customerName:[
            { required: true, message: '请选择签约人', trigger: 'change' },
          ],
          contractApproverid:[
            { required: true, message: '请选择审批人', trigger: 'change' },
          ],
          termsPayment:[
            { required: true, message: '请选择付款方式', trigger: 'change' },
          ],
          contractState:[
            { required: true, message: '请选择状态', trigger: 'change' },
          ]
        },
        userInfo:{
          employeesId:0,//员工id
          empName:''//员工名称
        },
        //合同复印件
        fileList2: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    created :function() {
      this.userInfo=JSON.parse(sessionStorage.getItem('user'));
      this.form2.contractState="1";
      this.contractName();
      this.loginInfo();
      this.pageSize1=this.pageSizes1[0];//取到可改变页数大小的第一个页数
      this.inDateCustomer(this.currentPage1,this.pageSize1,this.customerMc,JSON.parse(sessionStorage.getItem('user')).employeesId);
      this.payments();
      this.selectApproval();
    },
    watch:{
      'form2.customerByCustomId.cusName':function (val) {
        var aData = new Date();
        this.value =aData.getFullYear() + "-" + (aData.getMonth() + 1) + "-" + aData.getDate();
        let cusName=this.form2.customerByCustomId.cusName;
        this.form2.contractTheme= this.value+"["+cusName+"合同"+"]";
      },
      'form2.businessInfoByBusinesId':function (val) {
        this.offerEvent();
      }
    },
    methods: {
      //选择审批人
      selectApproval(){
        this.$axios.get("http://localhost:8088/buDetailsTwo/approval").then(v=>{
          this.approvalList = v.data;
        }).catch();
      },
      //登录信息
      loginInfo(){
        this.form2.empId8.employeesId=this.userInfo.employeesId;
        this.form2.empId8.empName=this.userInfo.empName;
      },
      //合同名称
      contractName(){
        this.$axios.get("http://localhost:8088/contract_name").then(v=>{
          this.form2.contractName=v.data;
        }).catch()
      },
      //付款方式
      payments(){
        this.$axios.get("http://localhost:8088/Payment_detail").then(v=>{
            this.paymentsList=v.data;
            this.termsPayment=v.data;
          }
        ).catch()
      },
      //客户选择弹框显示
      add(){
        this.customerVisable=true;
      },
      //客户分页查询
      inDateCustomer(currentPage1,pageSize1,customerMc,employeesId){
        this.$axios.get("http://localhost:8088/buInfo/customer",
          {params:{page:currentPage1,size:pageSize1,cusName:customerMc,employeesId:employeesId}})
          .then(v=>{
            this.customerList=v.data.rows;
            this.totalSize1 =v.data.total;
          }).catch()
      },
      //客户名称模糊查询
      searchCustomer(){
        this.inDateCustomer(1,this.pageSize1,this.customerInfo,JSON.parse(sessionStorage.getItem('user')).employeesId);
      },
      //改变客户分页的页码
      changePage1(val){
        this.inDateCustomer(val,this.pageSize1,this.customerMc,JSON.parse(sessionStorage.getItem('user')).employeesId);
      },
      //改变客户分页的每页页数
      handleSizeChange1(val){
        this.inDateCustomer(1,val,this.customerMc,JSON.parse(sessionStorage.getItem('user')).employeesId);
      },
      //确定客户
      customerOK(){
        this.customerVisable=false;
        this.form2.businessInfoByBusinesId='';
        this.radio=this.cusList[0].customId;
        this.$message("客户id"+this.radio);
        this.form2.customerByCustomId.cusName=this.cusList[0].cusName;
        this.form2.customerByCustomId.customId=this.cusList[0].customId;
        this.$message("嗯嗯"+ this.form2.customerByCustomId.customId);

        //对应客户商机查询
        this.$axios.get("http://localhost:8088/opportunity_detail",
          {params:{coustomId:this.radio}})
          .then(v=>{
            this.opportunityList=v.data;
            // this.totalSize =v.data.total;
          }).catch()

        //对应客户联系人
        this.$axios.get("http://localhost:8088/buInfo/culinkman",
          {params:{customerId: this.radio}}).then(v=>{
          this.culinkManList=v.data;
          this.form2.customerName=null;//清空联系人
          v.data.forEach((item,i)=>{
            if(item.cupMaster == 1){//为1该联系人为客户的首要联系人
              //默认为首要联系人
              this.form2.customerName=item.cupName;
            }
          })
        }).catch()
      },

      //对应报价单选择
      offerEvent(){
        this.$axios.get("http://localhost:8088/contoffer_detail",{params:{customId:133,busId:72,page:1,size:10}}).then(v=>{
          this.offerInfo=v.data.rows;
          this.totalSize2 =v.data.total;
        }).catch()
      },
      //报价单确定
      offerOK(){
        this.addformVisable=false;
        this.offerRadio=this.offerInfo[0].offerId2;
        this.form2.offerByOfferId2.offerId2=this.offerInfo[0].offerId2;
        this.form2.offerByOfferId2.offerNumber=this.offerInfo[0].offerNumber;
        this.form2.totalAmount=this.offerInfo[0].productOffer;
        this.offerNuber=this.offerInfo[0].offerNumber;
      },
      //客户单选框选中的行
      getCustomerRow(val){
        this.cusList=[];//先清空
        this.cusList.push(val);
      },
      //报价单单选框选中行
      getOfferRow(val){
        this.offerInfo=[];
        this.offerInfo.push(val);
      },
      //报价单查询弹框
      show(){
        this.addformVisable=true;
      },
      //合同复印件
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //表单2提交
      onSubmit2() {
        this.$refs.form2.validate((valid) => {
          if (valid) {
            let data =this.qs.stringify({
              cont : JSON.stringify(this.form2)
            });
            this.$axios.post("http://localhost:8088/contract_save",data).then(v=>{
              if(v.data=200){
                this.form2= {
                  //表单对象
                  contractApproverid:'',
                  contractId:'',//合同id
                  contractTheme: '',//主题
                  contractName:'',
                  customerByCustomId: {
                    customId:'',
                    cusName:''
                  },//对应客户
                  businessInfoByBusinesId: '',//对应机会
                  effectTime: '',//合同生效时间
                  failureTime: '',//合同失效时间
                  customerName:'',//签约人
                  empId8:{
                    employeesId:'',
                    empName:''
                  },//所有者
                  signingTime:'',//签约时间,
                  totalAmount:'',//总金额，
                  receivableAmount:'',//回款金额
                  termsPayment:'',//付款方式
                  contractState: '',//状态
                  noteInfo: '',//备注
                  offerByOfferId2:{
                    offerId2:'',
                    offerNumber:'',
                  }//报价单id
                }
                this.$router.push({path:'/contractpage'})
              }else {
              }
            }).catch()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    filters: {
      formatDate: function (time) {
        if (time != null && time != "") {
          var date = new Date(time);
          return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
        } else {
          return "";
        }
      }
    }

  }
</script>

<style scoped>

  .form_sty>>>.el-form-item__label{
    text-align: left;
    padding: 0 0 0 7px;
  }

  .form_sty>>>.el-form-item{
    margin: 10px 1px 1px ;
    padding: 10px 1px 1px 1px;
  }
  .form_sty>>>.el-dialog__body{
    padding:5px 20px;
  }
  .main_sty{
    border: 1px solid red;
    width: 100%;
  }
  .demo_sty{
    border:1px solid #ccc;
    width:100%;
    height: 535px;
    background: white;
    border-radius: 5px;
    box-shadow:#ccc 0px 0px 10px;
    overflow:hidden;
  }
  .return{
    border-right:1px solid #ccc;
    width:70px;
    color:#777;
    font-size: 13px;
    margin-left:10px;
    margin-top:10px;
    cursor: pointer;

  }
  .return:hover{
    color:#409eff;
    font-max-size: 10px;
  }
  .form_sty{
    border:1px solid #FFFFFF;
    background-color: #FFFFFF;
  }
  .el-form-item{
    padding: 20px 100px 0 10px;
  }
  .el-input{
    width: 50%;
    float: left;
    width: 217px;
  }
  .separator_sty{
    border:1px solid #409eff;
    width: 95%;
    margin: 10px auto;
  }
</style>
